<template>
  <div class="add-promotion">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ dialogTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 活动基本信息表单 -->
    <el-form
      :model="wineLists"
      ref="form"
      label-width="100px"
      style="margin-top: 1.3rem; padding-right: 2rem"
    >
      <!-- Name -->
      <el-form-item label="活动名称">
        <!-- <el-input
         v-model="wineLists.name"
         placeholder="输入活动名称"
       ></el-input> -->
        <el-select
          v-model="wineLists.name"
          @change="promptChange"
          placeholder="请选择活动"
        >
          <el-option
            v-for="item in types"
            :key="item.promotionId"
            :label="item.name"
            :value="item.promotionId"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- Start Date -->
      <el-form-item label="日期">
        <el-input
         style="width: 30%;"
          v-model="wineLists.start_date"
          :disabled="true"
          
        ></el-input
        >至<el-input
        style="width: 30%;"
          v-model="wineLists.end_date"
          :disabled="true"
          
        ></el-input>
      </el-form-item>
      <el-form-item label="折扣百分比">
        <el-input
          v-model="wineLists.discount_percent"
          placeholder="输入折扣百分比" :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="酒品名">
        <el-select v-model="wineLists.w_name" @change="wineChange" placeholder="请选择酒品名">
          <el-option
            v-for="item in winetype"
            :key="item.wineId"
            :label="item.wname"
            :value="item.wineId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="容量（毫升）">
        <el-input
          v-model="wineLists.volume_ml"
          placeholder="输入容量"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <!-- Alcohol Content -->
      <el-form-item label="酒精含量">
        <el-input
          v-model="wineLists.alcohol_content"
          placeholder="输入酒精含量"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <div class="avatar-uploader">
          <div class="avatar">
            <img
              v-if="wineLists.image_url"
              :src="mode === 'add' ? imageUrl : wineLists.image_url"
              style="width: 100%; height: 100%"
            />
            <i v-else class="el-icon-plus add avatar-uploader-icon"></i>
          </div></div
      ></el-form-item>

      <!-- Type -->
      <el-form-item label="类型">
        <el-input v-model="wineLists.type" :disabled="true" placeholder="输入类型"></el-input>
      </el-form-item>

      <!-- Stock Quantity -->
      <el-form-item label="库存数量">
        <el-input
          v-model="wineLists.stock_quantity"
          placeholder="输入库存数量" :disabled="true"
        ></el-input>
      </el-form-item>
      <!-- Price -->
      <el-form-item label="价格">
        <el-input v-model="wineLists.price" :disabled="true" placeholder="输入价格"></el-input>
      </el-form-item>

      <!-- Vintage Year -->
      <el-form-item label="年份">
        <el-input
          v-model="wineLists.vintage_year"
          placeholder="输入年份" :disabled="true"
        ></el-input>
      </el-form-item>
      <!-- Submit Button -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addWine } from "@/api/winepromotion";
import { Message } from "element-ui";
import { winelist } from "@/api/wine";
import { activelist } from "@/api/promotion";
export default {
  props: {
    mode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      types: [],
      promotion: {
        name: "",
        dateRange: [],
        selectedWines: [],
        discountPercent: 0,
        // 其他活动信息字段，根据实际需求添加
      },
      winetype: [],
      wineLists: {},
      imageUrl: "",
      availableWines: [
        { wineId: 1, name: "Wine A" },
        { wineId: 2, name: "Wine B" },
        // 其他酒品信息，从后端获取或硬编码
      ],
    };
  },
  computed: {
    dialogTitle() {
      return this.mode === "add" ? "添加酒品" : "编辑酒品";
    },
  },
  mounted() {
    this.getPromotion();
    this.winelist();
  },
  methods: {
    promptChange(value) {
      // Find the selected promotion by promotionId
      const selectedPromotion = this.types.find(
        (item) => item.promotionId === value
      );

      // Update wineLists with selected promotion data
      this.wineLists.start_date = selectedPromotion.startDate;
      this.wineLists.end_date = selectedPromotion.endDate;
      this.wineLists.discount_percent = selectedPromotion.discountPercent;
    },
    wineChange(value){
     const selectedwinetype = this.winetype.find(
        (item) => item.wineId === value
      );

      // Update wineLists with selected promotion data
      this.wineLists.volume_ml = selectedwinetype.volumeMl;
      this.wineLists.alcohol_content = selectedwinetype.alcoholContent;
      this.wineLists.discount_percent = selectedwinetype.discountPercent;
      this.wineLists.image_url=selectedwinetype.imageUrl;
      this.wineLists.type=selectedwinetype.type;
      this.wineLists.stock_quantity=selectedwinetype.stockQuantity;
      this.wineLists.price=selectedwinetype.price;
      this.wineLists.vintage_year=selectedwinetype.vintageYear;
    },
    async winelist() {
      const res = await winelist();
      if (res.code == 200) {
        this.winetype = res.data.list.records;
      } else {
        Message(res.message);
      }
    },
    async getPromotion() {
      const res = await activelist();
      if (res.code == 200) {
        this.types = res.data.list.records;
      } else {
        Message(res.message);
      }
    },
    submitForm() {
      console.log(this.wineLists.name);
      this.add();
    },
    async add() {
     
      const param = {
        promotionId: this.wineLists.name,
        wineId: this.wineLists.w_name,
      };
      const res = await addWine(param);
      if (res.code == 200) {
        Message(res.message);
      } else {
        Message(res.message);
      }
    }
   
  },
};
</script>

<style lang="scss" scoped>
/* 添加一些样式以美化页面 */
.add-promotion {
  margin: auto;
  padding: 18px;
}
.dfd {
  margin-top: 28px;
  max-width: 800px;
}
.avatar-uploader {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  line-height: 100px;
  vertical-align: top;
  text-align: center;
  .el-upload {
    height: 100px !important;
  }
}
.avatar {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 6px;
}
.add {
  font-size: 3rem;
  line-height: 2;
  color: #bbb6b6;

  text-align: center;
}
</style>
